<template>
  <Card v-if="!!row">
    <Row>
      <Col>
        <div style="margin-bottom:15px;">
          <h2 style="font-size:24px;font-weight:100;margin-top:5px;">
            设备详情
          </h2>
        </div>
        <dl class="dl-horizontal">
          <dt>设备状态：</dt>
          <dd>
            <Tag color="green" v-if="row.online">在线</Tag>
            <Tag color="grey" v-else>离线</Tag>
          </dd>
          <dt>数据状态：</dt>
          <dd>
            <Tag color="green" v-if="row.state === 1">正常</Tag>
            <Tag color="yellow" v-else-if="row.state === 2">预警</Tag>
            <Tag color="red" v-else-if="row.state === 3">告警</Tag>
            <Tag color="grey" v-else-if="row.state === 4">故障</Tag>
            <Tag color="grey" v-else>未知</Tag>
          </dd>
        </dl>
      </Col>
    </Row>
    <Row>
      <Col>
        <dl class="dl-horizontal">
          <!--  -->
          <dt>设备名称：</dt>
          <dd>{{ row.name }}</dd>
          <!--  -->
          <dt>设备别名：</dt>
          <dd>{{ row.alias }}</dd>
          <!--  -->
          <dt>设备位置：</dt>
          <dd>{{ row.location }}</dd>
          <!--  -->
          <dt>设备&nbsp;&nbsp;&nbsp;ID：</dt>
          <dd>{{ row.deviceId }}</dd>
          <!--  -->
          <dt>设备型号：</dt>
          <dd>{{ row.hardwareTypeAlias }}</dd>
        </dl>
      </Col>
    </Row>
  </Card>
</template>
<script>
export default {
  props: {
    row: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
<style lang="scss" scoped>
dl.dl-horizontal {
  overflow: hidden;
  & {
    margin-bottom: 15px;
  }
  dd,
  dt {
    line-height: 1.72857143;
  }
  dt {
    float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
  }
  dd {
    margin-left: 180px;
    &:before {
      display: table;
      content: ' ';
    }
  }
}
</style>
